import Vue from 'vue'

// normalize.css抹平浏览器的差异 不同浏览器一些css默认设置并不一样，可能影响我们css代码的，比如line-height
import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n  中英文

import '@/styles/index.scss' // global css

import App from './App'
import store from './store' // vuex
import router from './router' // 路由

import '@/icons' // icon  1:index.js 2:package.json 3:index.vue
// 优先级，先找package.json 再打index.js  再打index.vue
import '@/permission' // 导航守卫
import i18n from '@/lang'

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
/*
process.env.环境变量文件中配制的值
process.env.NODE_ENV它的值无须配制
只要是开发环境，它的值就是development  npm run serve npm run dev等它都是development
只要是生产环境，它的值就是production   npm run build后它的值就是production
*/
//  到了生产实际 开发一定是真实接口,为什么没有开发环境的处理？
/*
基本mockjs使用
1：安装npm i mockjs
2:创建一个js文件用于mock  src/api/mock.js
3:导入mock  import Mock from 'mockjs'
4:使用  Mock.mock(接口地址,{数据})
5:引入该js(该js需要执行才可以使用mock)
  1:main.js使用处理的mockjs
     import "@/api/mock.js"
  2:devServe:{
    在这里面导入使用mock的文件
    before: require('路径')
  }

*/

// if (process.env.NODE_ENV === 'production') {
//   // 如果运行的环境是生产环境就执行下面代码
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// set ElementUI lang to EN
// 设置elementui使用英文版本，默认是使用中文的
// Vue.use(ElementUI, { locale })
/*
use是什么？
Vue.use(对象/function,参数值)
对象：{
  install(Vue,形参值){}
}
function (Vue,形参值){

}

*/

// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) })
/*
全局自定义指令
  Vue.directive(指令名,{生命周期})
1:src/directives/index.js
2:暴露指令所需的元素:指令名,对象(生命周期东西)
3:在main.js批量注册
*/

// Vue.directive('imgError', {
//   inserted (dom, obj) {
//     dom.src = dom.src || obj.value
//     dom.onerror = function () {
//       dom.src = obj.value
//     }
//   }
// })
import directivesObj from '@/directives'
// for (let key in directivesObj) {
//   Vue.directive(key, directivesObj[key])
// }
// 返回值=Object.keys(对象)   // [对象的所有key]
Object.keys(directivesObj).forEach(item => {
  Vue.directive(item, directivesObj[item])
})
Vue.prototype.$bus = new Vue()
Vue.config.productionTip = false
/*
使用use完成全局组件注册*/

import componentJs from '@/components'
Vue.use(componentJs)
// 全局过滤器处理
/*
1:src/filters/index.js
2:export default {
  方法名:(参数)=>{return 值},
  方法名2:(参数2)=>{return 值2},
}
3:在mian.js实现全局注册过滤器
  导入  
  遍历对象实现全局注册
*/

// import employeesData from '@/utils/constant/employees'
// Vue.filter('filterFormOf', str => {
//   const _index = employeesData.hireType.findIndex(item => {
//     return item.id === str
//   })
//   return _index > -1 ? employeesData.hireType[_index].value : '--'
// })
import filtersObj from '@/filters'
// for (let key in filtersObj) {
//   Vue.filter(key, filtersObj[key])
// }
Object.keys(filtersObj).forEach(key => {
  Vue.filter(key, filtersObj[key])
})
// 加入全局默认头像的图片
Vue.prototype.$defaultUrl = require('@/assets/common/head.jpg')
import PrintNb from 'vue-print-nb'
Vue.use(PrintNb)

// 全局混入
import mixinsObj from '@/utils/mixins'
Vue.mixin(mixinsObj)
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})
